<template>
    <div class="colck-root">
        <div class="cards-cont">
            <div class="Card_1">07</div>
            <!-- <div class="cards  Card_2">07</div> -->
        <!-- <div class="colck-root Card_1">06</div> -->
            <!-- <div class="colck-root Card_1">07</div> -->
            <!-- <div class="cards Card_3">08</div>
            <div class="cards double-card Card_4">08</div> -->
            
        </div>
    </div>

</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.colck-root{
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(40, 40, 40);
    position: fixed;
    align-items: center;
}

.cards-cont{
    position: fixed;
    left: 50%;

    font-size: 50px;
    width: min-content;
    height:min-content;
    display: flex;
    flex-direction: row;   /*设置主轴方向是水平方向*/
    align-items: center;  /*设置侧轴上，子元素的排列方式为居中对齐*/
    text-decoration:line-through 1px;

    background-color: aliceblue;
    .Card_1{
        height: 50%;
        overflow: hidden;
        text-align: center;
    }
}
.cards{
    
    left: 50%;
    font-size: 50px;
    width: min-content;
    height: 50px;
    

}

.double-card{
    position: fixed;
    left: 50%;
    font-size: 50px;
    width: min-content;
    height: 37px;
    /**
        行高设为0  使得下面第二部分的数字只显示下半部分
     */
    line-height: 0; 
    background-color: aliceblue;
}


.Card_2{
    overflow: hidden;
    text-align: center;
}
.Card_3{
    
    overflow: hidden;
    border: 2px solid rgb(65, 65, 65);
    border-top: 0px solid;
    border-left: 0px solid;
    border-right: 0px solid;
    text-align: center;
}
.Card_4{
    
    
    border: 2px solid rgb(65, 65, 65);
    border-top: 0px solid;
    border-left: 0px solid;
    border-right: 0px solid;
}

</style>